<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <link rel="stylesheet" href="${pageContext.request.contextPath }/css/info-mgt.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/base.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath }/css/info-reg.css" />
    <title>天气预报界面</title>
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.leoweather.min.js"></script>
	<style>
	body  { font:14px/1.5 微软雅黑; text-align:center; }
	table { border:1px solid #DDD; border-collapse:collapse; width:980px; margin-top:20px; }
	thead,
	tfoot { background:#FAFAFA; }
	td,th { border:1px solid #DDD; text-align:left; font-weight:normal; padding:15px; }
	th,
	.demo { width:100px; min-width:100px; max-width:100px; }
	td    { width:680px; min-width:680px; max-width:680px; }
	#demo { width:780px; margin:100px auto; background:#72af3c; color:#FFF; padding:50px 0 100px 0; overflow:hidden; border-radius:5000px; }
	#demo i { background: no-repeat top left; display:inline-block; height:128px; line-height:128px; margin:0 auto 20px auto; font-size:70px; padding-left:150px; font-style:normal; text-align:center; font-weight:bold; }
	#demo i.icon-xiaoyu { background-image:url(icon/xiaoyu.png); }
	#demo i.icon-zhongyu { background-image:url(icon/zhongyu.png); }
	#demo i.icon-dayu { background-image:url(icon/dayu.png); }
	#demo i.icon-qing { background-image:url(icon/qing.png); }
	#demo i.icon-duoyun { background-image:url(icon/duoyun.png); }
	#demo i.icon-yin { background-image:url(icon/yin.png); }
	#demo p { background:rgba(0,0,0,.3); margin:0 200px; padding:20px; border-radius:1000px; font-size:16px; }
	#demo p span { margin:0 15px; }
	#demo2 { width:980px; margin:0 auto; margin-top:20px; background:#fafafa; border:1px solid #ddd; padding:30px 0; overflow:hidden; }
	.title{ line-height:33px; background:url(${pageContext.request.contextPath }/images/righttitlebig.png) repeat-x; border:1px solid #c1d3de; overflow:visible;}
    .title h2{ margin-left:7px;text-align:left; padding-left:22px; font-weight:bold; font-size:14px; font-family:'瀹嬩綋'; color:#000000; background:url(${pageContext.request.contextPath }/images/titleico.png) no-repeat left center;}
	</style>
</head> 
<body>
<div class="title">
    	<h2>天气预报</h2>
    </div>
<div id="demo">
	<script>$('#demo').leoweather({format:'<i class="icon-{图标}">{气温}℃</i><p>{城市}<span>|</span>{天气}<span>|</span>{风向}{风级}级</p>'});</script>
</div>
<div id="demo2">
	<script>$('#demo2').leoweather();</script>
</div>

</body> 
</html>

